<template>
  <div class="add-problem">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
<!--        <span>添加题目</span>-->
        <el-tag type="success">限时开放</el-tag>
        <el-tag type="success">v1.2</el-tag>
      </div>
      <el-form
        ref="addform"
        :model="form"
        label-width="80px"
        style="width: 700px"
      >
        <el-form-item label="课程">
          <el-select v-model="form.subject" placeholder="请选择课程">
            <el-option
              v-for="(item, index) in courses"
              :label="item.name"
              :value="item.name"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio label="选择题"></el-radio>
            <el-radio label="多选题"></el-radio>
            <el-radio label="填空题"></el-radio>
            <el-radio label="判断题"></el-radio>
            <el-radio label="简答题"></el-radio>
            <el-radio label="其它"></el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.type == '选择题' || form.type == '多选题'">
          <el-form-item label="题目">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.title"
            >
            </el-input>
          </el-form-item>
          <el-row :gutter="20"
                  v-for="i in 4"
                  :key="i">
            <el-col :span="20">
              <el-form-item :label="'选项' + String.fromCharCode(64 + i)"
              >
                <el-input placeholder="请输入内容" v-model="option[i - 1]">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" v-if="form.type == '选择题'">
              <el-radio v-model="form.answer" :label="option[i - 1]" border>{{String.fromCharCode(64 + i)}}
              </el-radio>
            </el-col>
            <el-col :span="4" v-if="form.type == '多选题'">
              <el-checkbox
                v-model="multipleChoiceResult"
                :label="i - 1" border>{{String.fromCharCode(64 + i)}}
              </el-checkbox>
            </el-col>
          </el-row>

        </template>
        <template v-else>
          <el-form-item label="题目">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.title"
            >
            </el-input>
          </el-form-item>
        </template>
        <template v-if="form.type == '判断题'">
          <el-form-item label="答案">
            <el-radio-group v-model="form.answer">
              <el-radio label="正确"></el-radio>
              <el-radio label="错误"></el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="答案">
            <el-input placeholder="请输入内容" v-model="form.answer">
            </el-input>
          </el-form-item>
        </template>
        <el-form-item label="解释">
          <el-input placeholder="请输入内容" v-model="form.expound"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        courses: [],
        form: {
          title: null,
          answer: null,
          subject: null,
          type: '选择题',
          expound: null,
        },
        multipleChoiceResult: [],
        option: [],
      }
    },
    created () {
      this.getCourses()
    },
    watch: {
      multipleChoiceResult: function (arr) {
        let tempArr = JSON.parse(JSON.stringify(arr))
        tempArr.sort()
        for (let i = 0; i < tempArr.length; i++) {
          tempArr[i] = this.option[tempArr[i]]
        }
        let element = ''
        for (let i = 0; i < tempArr.length; i++) {
          if (i != 0) {
            element += '#' + tempArr[i]
          } else {
            element += tempArr[i]
          }
        }
        this.form.answer = element
      }
    },
    methods: {
      async getCourses () {
        const { data: res } = await this.$http.get('courses')
        if (res.code == 200) {
          return
        }
        this.courses = res.data.courses
      },
      async onSubmit () {
        if (this.form.type == '选择题' || this.form.type == '多选题') {
          for (let i = 0; i < this.option.length; i++) {
            const element = this.option[i]
            if (i == 0) {
              this.form.title += '###' + element
            } else {
              this.form.title += '#' + element
            }
          }
        }
        const { data: res } = await this.$http.post('problem', this.form)
        if (res.code == 200) {
          return
        }
        this.form = {
          title: null,
          answer: null,
          subject: this.form.subject,
          type: this.form.type,
          expound: null,
        }
        this.option = []
        this.$message.success('添加成功')
      },
    },
  }
</script>

<style lang="scss">
  .add-problem {
    width: 800px;
    /*margin: 0 auto;*/

    .clearfix {
      overflow: hidden;

      span {
        font-weight: 700;
        margin-left: 10px;

      }
    }

    .el-select {
      width: 100%;
    }
  }
</style>
